<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="huoke">
			<view class="huoke-1">
				<image src="https://img.moxikeji.net/site/160/250626/685ce7f5f1a77.png" mode="widthFix"
					style="width: 100%; height: auto;border-radius: 8px;" />
			</view>
			<view class="huoke-2">
				<view class="item">
					<view>累计获客</view>
					<view class="num">{{ allStats.nums }}</view>
					<view>次</view>
				</view>
				<view class="line"></view>
				<view class="item">
					<view>今日获客</view>
					<view class="num">{{ allStats.dayNums }}</view>
					<view>次</view>
				</view>
				<!-- <view class="huoke-2-line"></view>
				<view class="huoke-2-item">
					<view>使用人次</view>
					<view style="font-size: 24px;color: #B0D8F5;">396</view>
					<view>人</view>
				</view> -->
			</view>
			<view class="huoke-3">
				<view class="item" @click="aiHuokeFormShow = true">
					<view class="icon">
						<image src="https://img.moxikeji.net/site/160/250630/6861fe3260c47.png" mode="scaleToFill"
							style="width: 24px; height: 24px;" />
					</view>
					<view>AI获客</view>
				</view>
				<view class="item" @click="navto('plugin_huoke/huoke_record')">
					<view class="item-icon">
						<image src="https://img.moxikeji.net/site/160/250630/6861ffb4412f1.png" mode="scaleToFill"
							style="width: 24px; height: 24px;" />
					</view>
					<view>获客记录</view>
				</view>
			</view>
			<view class="huoke-4">
				<view class="title">
					<span>
						<image src="https://img.moxikeji.net/site/160/250630/68620037b73e1.png" mode="scaleToFill"
							style="width: 23px; height: 23px; border: 1px solid #159AFF;" />
					</span>
					<view class="name">周获客统计</view>
				</view>
				<image src="https://img.moxikeji.net/site/160/250626/685cfa61b77f2.jpg" mode="scaleToFill"
					style="width: 100%; height: 5px;" />
			</view>

			<view class="huoke-5">
				<view class="item" v-for="(item, index) in huoke5Data" :key="index">
					<view class="top">
						<view class="index">{{ index + 1 }}</view>
						<view class="name">{{ week[item.name - 1] }}</view>
						<view class="value"><span
								style="font-weight: bold;font-size: 18px; color: #D0DEEE; margin-right: 4px;">{{
									item.value }}</span>次</view>
					</view>
					<view class="bottom">
						<view class="slider">
							<view class="show"
								:style="{ width: Math.floor((item.value / huoke5DataMaxValue) * 10000) / 100 + '%' }">
							</view>
							<view class="circle"
								:style="{ left: Math.floor((item.value / huoke5DataMaxValue) * 10000) / 100 + '%' }">
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="huoke-4">
				<view class="title">
					<span>
						<image src="https://img.moxikeji.net/site/160/250630/68620037b73e1.png" mode="scaleToFill"
							style="width: 23px; height: 23px; border: 1px solid #159AFF;" />
					</span>
					<view class="name">获客地区分布</view>
				</view>
				<image src="https://img.moxikeji.net/site/160/250626/685cfa61b77f2.jpg" mode="scaleToFill"
					style="width: 100%; height: 5px;" />
			</view>

			<view class="huoke-6">
				<view class="circle">
					<view class="show" v-for="(item, index) in huoke6ShowData" :key="index" v-if="item.show"
						:style="{ 'background-image': `conic-gradient(transparent ${item.startPer}%, ${item.color} 0 ${item.endPer}%, transparent 0 ${100 - parseFloat(item.endPer)}% )` }">
					</view>
					<view class="title">{{ huoke6DataTotal }}</view>
					<view class="bg">
					</view>
				</view>
				<view class="controll">
					<view class="item" v-for="(item, index) in huoke6ShowData" @click="clickAreaStatsDraw(index)">
						<view class="name">
							<view :style="{ background: item.show ? item.color : '#f5f5f5' }"
								style="width: 7.2px; height: 7.2px;"></view>
							<view style="min-width: 36px;">{{ item.name }}</view>
						</view>
						<view class="value">{{ item.value }}</view>
						<view class="percent">{{ item.per }}</view>
					</view>
				</view>
			</view>

			<view class="huoke-7">
				<view class="title">实时获客</view>
				<view class="line"></view>
				<scroll-view scroll-y style="height: 281px;" v-if="huoke7Data.length > 0">
					<view class="content" :class="scrollBottom ? 'active' : ''">
						<view class="item" v-for="(item, index) in huoke7Data" :key="index">
							<view class="time u-line-1">
								{{ nowTime - item.time < 3600 ? `${Math.ceil((nowTime - item.time) / 60)}分钟前` : nowTime
									- item.time < 24 * 3600 ? `${(nowTime - item.time) / 3600}小时前` : `${(nowTime -
										item.time) / 24 / 3600}天前` }} </view>
									<view class="content">{{ item.content }}</view>
									<view class="user u-line-1">{{ item.user }}</view>
							</view>
						</view>
				</scroll-view>
				<view v-else style="height: 250px; display: flex; align-items: center;justify-content: center;">
					<u-empty mode="list">
					</u-empty>
				</view>
			</view>
		</view>
		<view>
			<u-popup :show="aiHuokeFormShow" safeAreaInsetBottom mode="bottom" @close="showClose" closeOnClickOverlay
				round="10" :customStyle="{ maxHeight: '80vh' }" bgColor="#071745">
				<view class="popup_con">
					<view class="popup_con_title">
						<view></view>
						<view>申请获客</view>
						<view><u-icon name="close" color="#fff" size="18" @click="showClose"></u-icon></view>
					</view>
					<view class="popup_con_showScroll" :style="{ '--app-color': app_color }">
						<view class="form">
							<view class="formItem">
								<view class="title">企业名称<span style="color: orangered;">(必填)</span>:</view>
								<view class="input">
									<input type="text" placeholder-class="input-placeholder" placeholder="请输入企业名称"
										v-model="ruleForm.company_name">
								</view>
							</view>
							<view class="formItem">
								<view class="title">主营业务<span style="color: orangered;">(必填)</span>:</view>
								<view class="input">
									<view style="flex: 1;">
										<input style="border-radius: 8px 0 0 8px;" type="text" placeholder="请输入主营业务"
											v-model="ruleForm.business">
									</view>
									<view class="buttom" @click="addBusiness">
										<view>添加业务</view>
									</view>
								</view>
								<view class="tags" v-if="ruleForm.businessArr.length > 0">
									<view class="tag" v-for="(item, index) in ruleForm.businessArr">
										<!-- 文本 -->
										<view>{{ item }}</view>
										<!-- 关闭 -->
										<view class="close" @click="closeBusiness(index)">
											<u-icon name="close-circle-fill" size="16" :color="app_color"></u-icon>
										</view>
									</view>
								</view>
								<view style="font-size: 12px; color: #999;">例如：互联网、人工智能...</view>
							</view>
							<view class="formItem">
								<view class="title">区域范围<span style="color: orangered;">(必填)</span>:</view>
								<view class="input">
									<view style="flex: 1;">
										<input style="border-radius: 8px 0 0 8px;" type="text" placeholder="请输入区域范围"
											v-model="ruleForm.region">
									</view>
									<view class="buttom" @click="addRegion">
										<view>添加区域</view>
									</view>
								</view>
								<view class="tags" v-if="ruleForm.regionArr.length > 0">
									<view class="tag" v-for="(item, index) in ruleForm.regionArr">
										<!-- 文本 -->
										<view>{{ item }}</view>
										<!-- 关闭 -->
										<view class="close" @click="closeRegion(index)">
											<u-icon name="close-circle-fill" size="16" :color="app_color"></u-icon>
										</view>
									</view>
								</view>
								<view style="font-size: 12px; color: #999;">例如：全球、中国、北京、上海...</view>
							</view>
							<view class="formItem">
								<view class="title">联系人名称<span style="color: orangered;">(必填)</span>:</view>
								<view class="input">
									<input type="text" placeholder="请输入联系人名称" v-model="ruleForm.name">
								</view>
							</view>
							<view class="formItem">
								<view class="title">联系人电话<span style="color: orangered;">(必填)</span>:</view>
								<view class="input">
									<input v-model="ruleForm.tel" type="number" placeholder="请输入联系人电话">
								</view>
							</view>
							<view class="formItem">
								<view class="title">备注<span style="color: #999;">(选填)</span>:</view>
								<view class="input">
									<textarea
										style="padding: 16px; background-color: #ffffff16; border-radius: 8px; width: 100%; max-height: 75px;"
										v-model="ruleForm.note" placeholder="请输入备注"></textarea>
									<!-- <input type="text"> -->
									<!-- <u--textarea :placeholderStyle="{ color: '#fff' }"
										:customStyle="{ color: '#fff', border: 'none', backgroundColor: '#ffffff16', padding: '8px 12px', }"
										v-model="ruleForm.note" placeholder="请输入备注"></u--textarea> -->
								</view>
							</view>
							<!-- <view class="formItem">
								<view class="title">获客目标人数:</view>
								<view class="input">
									<u--input clearable placeholder="请输入获客目标人数" border="surround" v-model="ruleForm.num"
										type="number"></u--input>
								</view>
							</view> -->
						</view>
						<view class="btnArea">
							<view class="btn" @click="formPost" style="margin-bottom: 16px;">
								提交
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			huoke5Data: [],
			huoke5DataMaxValue: 0,
			huoke6Data: [],
			huoke6DataTotal: 0,
			huoke6ShowData: [],
			huoke7Data: [],
			hasMore: true,
			circleData: {},
			scrollBottom: false,
			nowTime: 0,
			timer: null,
			aiHuokeForm: {},
			aiHuokeFormShow: false,
			allStats: {
				nums: 0,
				dayNums: 0,
			},
			ruleForm: {
				company_name: '',
				business: '',
				region: '',
				businessArr: [],
				regionArr: [],
				name: '',
				tel: '',
				note: '',
				num: 1
			},
			huokeTimer: null,
			week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
		};
	},
	onLoad() {
		// 判断用户是否登录，如果没有登录则跳转到登录页面
		if (!this.userinfo || !this.userinfo.id) {
			// 清空缓存
			this.toLogin();
			return;
		}
		this.getStaticPageData();
		this.nowTime = Math.floor(+new Date() / 1000);

		// 定时器，每秒获取当前时间戳 s
		this.timer = setInterval(() => {
			// 获取当前时间s
			this.nowTime = Math.floor(+new Date() / 1000);
		}, 1000)
	},
	// 销毁定时器
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer);
		}
		if (this.huokeTimer) {
			clearInterval(this.huokeTimer); // 组件销毁前清除定时器
		}

	},
	mounted() {
		// 启动定时任务
	},
	methods: {
		formPost() {
			if (!this.ruleForm.company_name) {
				this.msg('请输入公司名称');
				return;
			}
			if (this.ruleForm.businessArr.length == 0) {
				this.msg('请添加业务');
				return;
			}
			if (this.ruleForm.regionArr.length == 0) {
				this.msg('请添加区域');
				return;
			}
			if (!this.ruleForm.name) {
				this.msg('请输入联系人名称');
				return;
			}
			if (!this.ruleForm.tel) {
				this.msg('请输入联系人电话');
				return;
			}
			if (!this.ruleForm.num) {
				this.msg('请输入人数');
				return;
			}
			// 校验电话是否合法
			if (!/^1[3456789]\d{9}$/.test(this.ruleForm.tel)) {
				this.msg('请输入正确的手机号');
				return;
			}
			// 校验人数是否为正整数
			if (!/^\d+$/.test(this.ruleForm.num)) {
				this.msg('获客目标人数请输入正整数');
				return;
			}

			this.ruleForm.business = this.ruleForm.businessArr.join(',');
			this.ruleForm.region = this.ruleForm.regionArr.join(',');
			this.moxiPost(
				'/plugin/huoke/index/index/get_client',
				this.ruleForm,
				(res) => {
					this.showClose();
					this.msg(res.hint);
				}
			)
		},
		closeBusiness(index) {
			this.ruleForm.businessArr.splice(index, 1);
		},
		closeRegion(index) {
			this.ruleForm.regionArr.splice(index, 1);
		},
		addBusiness() {
			console.log('我被触发了');

			// 非空判断和只有空格判断
			if (!this.ruleForm.business || this.ruleForm.business.trim() === '') {
				this.msg('请输入业务');
				return;
			}
			if (this.ruleForm.businessArr.indexOf(this.ruleForm.business) == -1) {
				this.ruleForm.businessArr.push(this.ruleForm.business);
				this.ruleForm.business = '';
			} else {
				this.msg('业务已存在');
			}
		},
		addRegion() {
			// 非空判断和只有空格判断
			if (!this.ruleForm.region || this.ruleForm.region.trim() === '') {
				this.msg('请输入区域');
				return;
			}
			if (this.ruleForm.regionArr.indexOf(this.ruleForm.region) == -1) {
				this.ruleForm.regionArr.push(this.ruleForm.region);
				this.ruleForm.region = '';
			} else {
				this.msg('区域已存在');
			}
		},
		getHuokeRecord() {
			this.moxiPost(
				'/plugin/huoke/index/index/record', {
				page: 1,
				page_num: 10
			},
				(res) => {
					let tempData = []
					tempData = res.data.data
					tempData.forEach(item => {
						this.huoke7Data.push({
							time: this.nowTime,
							user: item.name,
							content: '获取1条新线索'
						})
					});
					this.startAddingData();
				}
			)
		},
		showClose() {
			this.ruleForm = {
				company_name: '',
				business: '',
				region: '',
				businessArr: [],
				regionArr: [],
				name: '',
				tel: '',
				note: '',
				num: 1000
			}
			this.$nextTick(() => {
				this.aiHuokeFormShow = false;
			})
		},
		startAddingData() {
			this.moxiPost(
				'/plugin/huoke/index/index/createdata', {},
				(res) => {
					let tempData = [];
					tempData = res.data
					let index = 0; // 判断执行了几次
					this.scrollBottom = false;
					// 随机插入时间 1 ~ 2s
					let randomTime = 1500; // 时间控制
					this.huokeTimer = setInterval(() => {
						randomTime = Math.floor(Math.random() * 1000) + 1500;
						this.scrollBottom = true;
						this.huoke7Data.unshift({
							time: this.nowTime,
							user: tempData[index].name ? tempData[index].name : '赵**',
							content: '获取1条新线索',
						})
						index++;
						setTimeout(() => {
							this.scrollBottom = false;
							if (index == tempData.length) {
								index = 0;
							}
						}, 1000)
					}, randomTime);
				}
			)
		},
		clickAreaStatsDraw(index) {
			this.huoke6ShowData[index].show = !this.huoke6ShowData[index].show;
			let showTotal = this.huoke6ShowData.filter(item => item.show).reduce((pre, cur) => pre + (cur.value || 0),
				0);
			let per = 0;
			this.huoke6ShowData.forEach(item => {
				let tempPer = per
				if (item.show) {
					per = per + parseFloat((item.value / showTotal * 100).toFixed(2));
					item.startPer = tempPer;
					item.endPer = per;
				}
			})
		},
		areaStatsDraw() {
			this.huoke6ShowData = [];
			this.huoke6DataTotal = this.huoke6Data.reduce((pre, cur) => pre + cur.count, 0);
			let per = 0;
			this.huoke6Data.forEach(item => {
				let tempPer = per
				let Per = this.huoke6DataTotal >= 0 ? parseFloat((item.count / this.huoke6DataTotal * 100)
					.toFixed(2)) : 0;
				per = per + Per;
				this.huoke6ShowData.push({
					show: true,
					color: item.color,
					name: item.name,
					value: item.count,
					per: Per + '%',
					startPer: tempPer, // 起始
					endPer: per,
				})
			})
		},
		areaStatsLegendClick(index) {
			if (this.huoke6ShowData[index].show) {
				this.huoke6ShowData[index].show = false
			} else {
				this.huoke6ShowData[index].show = true
			}
		},
		getStaticPageData() {
			this.moxiPost(
				'/plugin/huoke/index/index/huoke_countlist', {},
				(res) => {
					console.log(res)
					this.huoke6Data = [];
					for (let key in res.data.regionStats) {
						this.huoke6Data.push({
							name: key,
							count: res.data.regionStats[key].num,
							color: res.data.regionStats[key].color
						})
					}
					this.areaStatsDraw();

					for (let key in res.data.week) {
						this.huoke5Data.push({
							name: key,
							value: res.data.week[key]
						})
					}
					this.huoke5DataMaxValue = Math.max(...this.huoke5Data.map(item => item.value)) + 20;

					let date = new Date();
					let nowYear = date.getFullYear()
					let nowDay = date.getDate();
					let nowMonth = date.getMonth() + 1;
					let nowTime = parseInt(nowYear + (nowMonth < 10 ? '0' + nowMonth : nowMonth) + (nowDay < 10 ?
						'0' + nowDay : nowDay));
					this.allStats = {
						nums: res.data.num,
						dayNums: res.data.day[nowTime] ? res.data.day[nowTime] : 0
					};
					this.getHuokeRecord();
				}
			)
		}
	}
}
</script>

<style lang="scss">
.huoke {
	flex: 1;
	position: relative;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;

	&-2 {
		white-space: nowrap;
		font-size: 12px;
		color: #99B3C8;
		border-radius: 8px;
		padding: 21px 28px;
		background-color: #011B64;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 8px;

			.num {
				font-size: 24px;
				color: #B0D8F5;
			}
		}

		.line {
			width: 1px;
			height: 24px;
			background-color: #FFFFFF16;
		}
	}

	&-3 {
		white-space: nowrap;
		display: flex;
		gap: 8px;

		.item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			background: rgba(3, 41, 150, 0.3);
			border: 1px solid rgba(255, 255, 255, 0.21);
			box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
			backdrop-filter: blur(20.4px);
			border-radius: 8px;
			padding: 24rpx 40rpx;
			color: #B0D8F5;
			font-size: 14px;

			.icon {
				width: 48px;
				height: 48px;
				background-color: #B0D8F516;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	&-4 {
		background: linear-gradient(90deg, #159aff7d 0%, #159AFF00 10%);
		display: flex;
		flex-direction: column;
		margin-top: 8px;

		.title {
			display: flex;
			gap: 12px;
			padding-top: 5px;

			.name {
				font-size: 16px;
				line-height: 24px;
				letter-spacing: 2px;
				color: #FFFFFF;
				text-shadow: 0px 0px 9px #159AFF;
			}
		}
	}

	&-5 {
		display: flex;
		flex-direction: column;
		gap: 8px;

		.item {
			border-radius: 8px;
			border: 1px solid #6C8097;
			padding: 10px 8px;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.index {
					border: 0.5px solid #1490F6;
					background-color: #1490F61A;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 12px;
					width: 24px;
					height: 16px;
				}

				.name {
					margin: 0 auto 0 8px;
					color: #D0DEEE;
					font-size: 14px;
				}

				.value {
					font-size: 12px;
					color: #6C8097;
				}
			}

			.bottom {
				margin-top: 12px;
				height: 12px;
				position: relative;

				.slider {
					height: 4px;
					width: 100%;
					position: relative;

					.show {
						height: 100%;
						background: linear-gradient(90deg, #1490F65C 0%, #1490F6 100%);
					}

					.circle {
						width: 6px;
						height: 6px;
						background-color: #fff;
						border-radius: 50%;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);

						&::before {
							content: '';
							width: 15px;
							height: 15px;
							border: 1px solid #159AFF;
							opacity: .3;
							border-radius: 50%;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: #D0DEEE;
						opacity: .1;
					}
				}
			}
		}
	}

	&-6 {
		display: flex;
		gap: 24px;
		align-items: center;
		margin-top: 4px;
		overflow: scroll hidden;
		border-radius: 12px;

		.circle {
			flex-shrink: 0;
			width: 142px;
			height: 142px;
			border: 4px solid #6C809732;
			border-radius: 50%;
			position: relative;

			.show {
				width: 136px;
				height: 136px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
			}

			.title {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-weight: bold;
				font-size: 24px;
				line-height: 40px;
				letter-spacing: 0.833334px;
				color: #FFFFFF;
				text-shadow: 0px 0px 7.50001px #159AFF;
				z-index: 999;
			}

			.bg {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 116px;
				height: 116px;
				border-radius: 50%;
				background-color: #00164F;
				z-index: 998;
			}

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 93.32px;
				height: 93.32px;
				border-radius: 50%;
				border: 0.78px solid #6C8097;
				opacity: .7;
				z-index: 999;
			}
		}

		.controll {
			display: flex;
			flex-direction: column;
			gap: 4px;
			white-space: nowrap;

			.item {
				display: flex;
				gap: 16px;
				align-items: center;
				font-size: 14px;
				color: #D0DEEE;

				.name {
					font-size: 12px;
					display: flex;
					gap: 10px;
					align-items: center;
				}

				.value {
					font-weight: bold;
					min-width: 28px;
				}

				.percent {
					font-weight: bold;
				}
			}
		}
	}

	&-7 {
		padding: 18px 22px;
		background: rgba(3, 41, 150, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 2px 4px 4px 3px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(16.8px);
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 24px;

		.title {
			font-size: 16px;
			color: #B0D8F5;
			text-align: center;
		}

		.line {
			height: 2px;
			width: 100%;
			background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF 50%, #FFFFFF00 100%);
			opacity: .3;
		}

		.content {
			display: flex;
			flex-direction: column;
			gap: 12px;

			&.active {
				transform: translateY(-28px);
				animation: bottom 1s ease-in-out;
				transform: translateY(0);
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 4px;
				font-size: 12px;

				.time {
					width: 60px;
					color: #FFFFFF;
				}

				.content {
					color: #1490F6;
				}

				.user {
					width: 60px;
					text-align: right;
					color: #FFFFFF;
					opacity: .5;
				}

				.bottom {
					text-align: center;
					color: #FFFFFF;
					opacity: .5;
					font-size: 10px;

					&.active {
						animation: bottom 1s ease-in-out;
						transform: translateY(0);
					}
				}
			}
		}
	}

	@keyframes bottom {
		0% {
			transform: translateY(-28px);
		}

		100% {
			transform: translateY(0);
		}
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background-image: url('https://img.moxikeji.net/site/160/250624/685a0c3c861b4.png');
		background-size: 40px 40px;
		opacity: .3;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #00164F;
		z-index: -2;
	}
}

.popup_con {
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1;
	overflow: hidden;
	color: #fff !important;

	&_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 30px);
		font-size: 18px;
		font-weight: bold;
		padding: 16px 15px;
	}

	&_close {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	&_showScroll {
		flex: 1;
		margin-top: 8px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		overflow: hidden;

		.form {
			flex: 1;
			padding: 0 15px;
			overflow: hidden scroll;

			.formItem {
				&>view {
					margin-bottom: 4px;

					&:last-of-type {
						margin-bottom: 16px;
					}
				}

				.title {
					font-weight: bold;
					display: none;
				}

				.input {
					display: flex;
					gap: 0;
					align-items: center;

					input {
						flex: 1;
						border: none;
						background-color: #ffffff16;
						padding: 0 12px;
						border-radius: 8px;
						height: 36px;
						font-size: 14px;

						::v-deep .input-placeholder {
							color: #fff !important;
						}
					}

					::v-deep .textarea-placeholder {
						color: #fff !important;
					}

					& .buttom {
						position: relative;
						background-color: var(--app-color);
						color: #fff;
						padding: 0 12px;
						border-radius: 0 8px 8px 0;
						font-size: 12px;
						z-index: 99;
						height: 36px;
						line-height: 36px;
					}
				}

				input {
					color: #fff;
				}

				.tags {
					display: flex;
					flex-wrap: wrap;
					gap: 4px;

					.tag {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 4px 8px;
						border-radius: 8px;
						font-size: 12px;
						border: 1px solid var(--app-color);
						gap: 4px;
						color: var(--app-color);
					}
				}
			}
		}

		.btnArea {
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				min-width: 320px;
				padding: 8px 0;
				color: #fff;

				border-radius: 8px;
				width: 80%;
				text-align: center;
				font-size: 16px;
				background-color: var(--app-color);
			}
		}
	}

	&_noData {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 30vh;
	}
}
</style>